<template>
	<view>
		<view class="tabbar-container" :class="isIpx?'IpxBot':''">
			<view class="tabbar-item" v-for="(item,index) in tabList" :class="[item.centerItem ? 'center-item' : '']"
				@click="changeItem(item)" :key="index">
				<view class="item-top" :style="{padding: item.id == 2 ? 0:'10rpx'}"
					:class="[tabId==item.id ? 'item-top-active' : '']">
					<image :src="tabId==item.id?item.selectIcon:item.icon" mode=""></image>
					<text v-if="item.showIcon && parseInt(messageNum) <= 0"></text>
					<text class="msgicon1"
						v-else-if="item.showIcon && parseInt(messageNum) > 0 && parseInt(messageNum) <= 99">{{messageNum}}</text>
					<text class="msgicon2" v-if="item.showIcon && parseInt(messageNum) > 99">99+</text>
				</view>
				<view class="item-bottom" :class="[tabId==item.id ? 'item-bottom-active' : '']">
					<view>{{item.text}} </view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			currentPage: {
				type: Number,
				default: -1
			},
			messageNum: {
				type: Number | String,
				default: 0
			}
		},
		data() {
			return {
				//适配IPhoneX
				isIpx: false,
				//底部Tab
				tabId: 4,
				tabList: [
					{
							id: 4,
							path: "/pages/choujiang/index",
							icon: "/static/tabBar/jiang.png",
							selectIcon: "/static/tabBar/jiang_active.png",
							text: "抽奖",
							centerItem: false,
							showIcon: false
						},
					{
						id: 0,
						path: "/pages/index/index",
						icon: "/static/tabBar/home.png",
						selectIcon: "/static/tabBar/home_active.png",
						text: "首页",
						centerItem: false,
						showIcon: false
					},
					
					{
						id: 1,
						path: "/pages/blindbox/blindbox",
						icon: "/static/tabBar/box.png",
						selectIcon: "/static/tabBar/box_active.png",
						text: "盲盒",
						centerItem: false,
						showIcon: false
					},
					{
						id: 2,
						path: "/pages/mall/mall",
						icon: "/static/tabBar/mall.png",
						selectIcon: "/static/tabBar/mall_active.png",
						text: "商城",
						centerItem: false,
						showIcon: false
					},
					{
						id: 3,
						path: "/pages/mine/mine",
						icon: "/static/tabBar/mine.png",
						selectIcon: "/static/tabBar/mine_active.png",
						text: "我的",
						centerItem: false,
						showIcon: true
					},
				]
			};
		},
		created() {
			// 判断为 iPhone X 以上机型 给予底部距离
			uni.getSystemInfo({
				success: (res) => {
					let safeBottom = res.screenHeight - res.safeArea.bottom;
					if (safeBottom === 34) {
						this.isIpx = true;
					}
				}
			})
		},
		mounted() {
			this.tabId = this.currentPage;
			//隐藏原生tab
			uni.hideTabBar();
		},
		methods: {
			// tab 切换
			changeItem(item) {
				
				uni.switchTab({
					url: item.path
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	view {
		padding: 0;
		margin: 0;
		box-sizing: border-box;
	}

	.tabbar-container {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 120rpx;
		// background: url() no-repeat;
		background-size: 100% 100%;
		box-shadow: 0 0 5rpx #999;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 5rpx 70rpx;
		color: #333333;
		background-color: #FFFFFF;
		z-index: 999;
	}

	.tabbar-container .tabbar-item {
		height: 100rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
		position: relative;
	}

	.tabbar-container .item-top {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.tabbar-container .item-top-active {
		// background-color: #FF6408;
		border-radius: 50%;
	}

	.tabbar-container .item-bottom-active {
		color: #3878ee !important;
	}

	.tabbar-container .item-active .item-top image {
		width: 60rpx;
		height: 60rpx;
	}

	.tabbar-container .center-item {
		display: block;
		position: relative;
	}

	.tabbar-container .tabbar-item .item-top {
		width: 70rpx;
		height: 70rpx;
		padding: 5rpx;
	}

	.tabbar-container .center-item .item-top {
		flex-shrink: 0;
		width: 100rpx;
		height: 100rpx;
		position: absolute;
		top: -54rpx;
		left: calc(50% - 50rpx);
		border-radius: 50%;
		box-shadow: 0 0 5px #999;
		background-color: #FFFFFF;
	}

	.tabbar-container .tabbar-item .item-top image {
		width: 46rpx;
		height: 44rpx;
	}

	.tabbar-container .tabbar-item .item-top .msgicon1 {
		width: 40rpx;
		height: 40rpx;
		background: #FF3B30;
		box-shadow: 0 2rpx 4rpx 0 rgba(255, 59, 48, 0.3);
		border: 2rpx solid #FFFFFF;
		border-radius: 50%;
		font-size: 18rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: -10rpx;
		right: 0;
	}

	.tabbar-container .tabbar-item .item-top .msgicon2 {
		width: 60rpx;
		height: 40rpx;
		background: #FF3B30;
		box-shadow: 0 2rpx 4rpx 0 rgba(255, 59, 48, 0.3);
		border: 2rpx solid #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 0;
		font-size: 18rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: -15rpx;
		right: -20rpx;
	}

	.tabbar-container .tabbar-item .item-bottom {
		font-size: 24rpx;
		width: 100%;
		color: #999999;
	}

	.tabbar-container .center-item .item-bottom {
		position: absolute;
		bottom: 2rpx;
	}

	/* 适配iPhone X */
	.IpxBot {
		padding-bottom: 30rpx !important;
	}
</style>
